<template>
	<view class="mall-wrap">
		<view class="index-bg" style="height: 240rpx; position: absolute;"></view>
		<view class="mall-search">
			<view class="mall-search-box" @click="gotoRouter('/pages-mall/searchDrug/searchDrug')">
				<view class="search-box-layer">
					<image class="search-box-icon" src="http://k8s.vendingtech.vip/images/search@2x.png"></image>
					<view class="search-box-info">搜索药品</view>
				</view>
			</view>
			<view style="padding: 4rpx 16rpx; position: relative;" @click="gotoRouter('/pages-mall/medicineCart/medicineCart')">
				<image class="mall-search-infotm" src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_mall_cart_count.png"></image>
				<view v-if="cartCount > 0" class="cart-count">{{cartCount}}</view>
			</view>
		</view>
		<scroll-view style="position: relative;" scroll-y="true" @scrolltolower="loadMoreMedicine()">
			<!-- <image class="mall-ikon" src="http://k8s.vendingtech.vip/images/banner.png"></image> -->
			<view class="mall-ikon">
				<uni-swiper-dot class="banner-swiper-dot" :info="bannerImgList" :current="bannerImgCurrent" field="content" mode="default">
					<swiper class="swiper-box" autoplay="true">
						<swiper-item v-for="(banner_item, index) in bannerImgList" :key="index">
							<image mode="aspectFill" class="banner-bannerImg" :src="banner_item.bannerUrl" @click="dynamicJump(banner_item)" ></image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			
			<view class="mall-tab">
				<view class="mall-tab-outer" v-for="(menu, index) in entryList" :key="index" @click="jumpToPage(menu)">
					<image :src="menu.bannerUrl" class="mall-tab-pic"></image>
					<view>{{menu.title}}</view>
				</view>
			</view>
			
			<view class="mall-ads">
				<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_mall_ad1.png"></image>
				<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_mall_ad2.png"></image>
				<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_mall_ad3.png"></image>
			</view>
			
			<view style="padding: 0 32rpx;">
				<u-title value="精选药品"></u-title>
			</view>
			
			<view style="display: flex; flex-wrap: wrap;">
				<view class="medicine-card" v-for="(medicine, index) in medicineList" :key="index" :data="medicine" @click="gotoRouter('/pages-mall/medicineDetail/medicineDetail?id=' + medicine.id)">
					<!-- <view class="pic-wrap">
						<image :src="medicine.thumbnailUrl" mode="heightFix"></image>
					</view> -->
					<view class="medicine-pic-wrap">
						<image :src="medicine.thumbnailUrl" class="medicine-pic"></image>
						<view v-if="medicine.recipeFlag > 0" class="prescription-tag">处方药</view>
					</view>
					<view class="medicine-name">{{medicine.name}}</view>
					<view class="medicine-abstract">{{medicine.majorCure}}</view>
					<view class="price-line">
						<view>￥{{medicine.salesPrice}}</view>
						<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_mall_add_cart.png" @click.stop="addCart(medicine)"></image>
					</view>
				</view>
			</view>
			
			<view v-if="totalSize == medicineList.length" class="end-line">～我是有底线的呢～</view>
			<view style="height: 40rpx;"></view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartCount: 0,
				entryList: [],
				bannerImgList: [],
				bannerImgCurrent: 1,
				medicineList: [],
				totalSize: 0,
				currPage: 1,
				pageSize: 20
			};
		},
		onLoad(options) {
			this.getUserDetail();
		},
		onShow() {
			//异常回到主页
			// if (app.globalData.role != 0) {
			// 	app.globalData.role = 0;
			// 	app.globalData.nim.destroy({
			// 		done: () => {
			// 			this.initIm(imInfo.get().token, imInfo.get().accid);
			// 			uni.reLaunch({
			// 				url: '/pages/index/index'
			// 			});
			// 		}
			// 	});
			// }
		
			this.queryPageIndex();
			this.querymedicineList();
			this.getCartCount();
		},
		methods: {
			//获取用户详情
			getUserDetail() {
				this.$api.getUserDetail({}).then(res => {
					if (res.code == 200) {
						this.currentRole = res.result?.currentRole;
					}
				});
			},
		
			//首页banner及功能入口
			queryPageIndex() {
				this.$api
					.getMallIndex({})
					.then(res => {
						if (res.code == 200) {
							this.entryList = res.result.menusList;
							this.bannerImgList = res.result.slideshow;
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					});
			},
		
			//药品列表
			querymedicineList() {
				this.currPage = 1;
				this.$api
					.getMedicineList({
						params: {
							indexShow: 1,
							pageNo:this.currPage,
							pageSize: this.pageSize
						}
					})
					.then(res => {
						if (res.code == 200) {
							this.medicineList = res.result.records;
							this.totalSize = res.result.total;
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					});
			},
			
			loadMoreMedicine() {
				if (this.totalSize > this.medicineList.length) {
					this.$api.getMedicineList({
						params: {
							indexShow: 1,
							pageNo: this.currPage + 1,
							pageSize: this.pageSize
						}
					}).then(res => {
						if (res.code == 200) {
							this.medicineList = this.medicineList.concat(res.result.records);
							this.totalSize = res.result.total;
							this.currPage = res.result.current;
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					})
				}
			},
			
			getCartCount() {
				this.$api.getCartCount({}).then(res => {
					if (res.code == 200) {
						this.cartCount = res.result;
					} else {
						
					}
				})
			},
			
			addCart(medicine) {
				this.$api.addIntoCart({
					data: {
						commodityId: medicine.id,
						count: 1
					}
				}).then(res => {
					if (res.code == 200) {
						this.cartCount = this.cartCount + 1;
						uni.showToast({
							title:"加入购物车成功",
							icon:'success'
						})
					} else {
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
				})
			},
			
			jumpToPage(menu) {
				this.dynamicJump(menu);
				// if (menu.redirectUrl) {
				// 	this.gotoRouter(menu.redirectUrl);
				// } else {
				// 	this.gotoRouter('/pages-mall/medicineList/medicineList');
				// }
			}
		}
	}
</script>

<style lang="less" scoped>
@import './mall.less';
.banner-swiper-dot {
	// margin: 20rpx auto;
	width: 686rpx;
	height: 240rpx;
	box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
	border-radius: 16rpx;
	.swiper-box {
		border-radius: 16rpx;
		width: 686rpx;
		height: 240rpx;
		background: #ffffff;
		.banner-bannerImg {
			border-radius: 16rpx;
			display: block;
			width: 686rpx;
			height: 240rpx;
			margin: 0 auto;
		}
	}
}

</style>
